import "babel-polyfill";
import wrapperTpl from './tpl/wrapper.tpl';
import itemTpl from './tpl/item.tpl';
import indicatorTpl from './tpl/indicator.tpl';
import controlTpl from './tpl/control.tpl';
import tools from '../../utils/tools';
import './index.scss';



class Carousel{
    constructor(el,data){
        this.name ="carousel";
        this.$el = el;
        this.data = data;
        this.dataLen = this.data.length;
        this.idxCur = 0;
        
    }
    async init(){
      await this.reander();
            this.autoPlay();
            this.bindEvent();
    }
    async reander(){
      await this.$el.append(tools.tplReplace(wrapperTpl(),{
        list:this.makeItem(),
        indicatorW:18*this.dataLen,
        indicator:this.makeIidicator(),
        control: controlTpl()
    }));  

       this.$carouselCar = $('.J_carousel');
       this.$carItem = this.$carouselCar.find('.car-item')
       this.$indicatoItem = this.$carouselCar.find('.indicator-item');

       
      
    }
    bindEvent(){
        this.$carouselCar.on("mouseenter",$.proxy(this.mouserInOut,this));
        this.$carouselCar.on("mouseleave",$.proxy(this.mouserInOut,this));
        this.$carouselCar.on('click',$.proxy(this.clickCarouselCar,this));
    }
    clickCarouselCar(){
        let e = e || window.event,
            tar = e.target,
            $tar = $(tar),
            className = tools.trimSpaces(tar.className);
            switch(className){
                case "indicator-item":
                    this.curIdx = $tar.index();
                    this.fadeAction(this.curIdx);
                    break;
                case "car-control":
                     let dir = $(tar).attr('data-dir');
                         this.run(dir);
                    break;
                default:
                    break;
            }
    }
    mouserInOut(e){
        let eType = e.type;
        switch(eType){
            case "mouseenter":
                clearInterval(Carousel.timer);

                break;
            case 'mouseleave':
                this.autoPlay();
            default:
                break;

        }

    }
    autoPlay(){
        Carousel.timer = setInterval(this.run.bind(this, 'next'),3000);
    }
    run(dir){
        switch(dir){
            case 'next':
                 if(this.idxCur >= this.dataLen-1){
                     this.idxCur = 0;
                 }else{
                     this.idxCur++;
                 }
                break;
            case 'prev':
                if(this.idxCur === 0){
                    this.idxCur = this.dataLen-1;
                }else{
                    this.idxCur--;
                }
                break;
            default:
                break;
        }
        this.fadeAction(this.idxCur);
    }
    fadeAction(index){
        this.$carItem.eq(index).fadeIn()
                     .siblings().fadeOut();
        this.$indicatoItem.eq(index).addClass('current')
                           .siblings().removeClass('current');

    }
    makeItem(){
        let list = "";
        this.data.forEach((item,idx)=>{
            list += tools.tplReplace(itemTpl(),{
                isActive:idx === 0 ? 'active' : '',
                swiper_img:item.pic,
                alt:item.alt

            })
        })
        return list;
    }
    makeIidicator(){
        let list = "";
        for(var i = 0; i < this.dataLen;i++){
           list += tools.tplReplace(indicatorTpl(),{
                isCurrent: i ===0 ? 'current':''
             })
        }
        return list;
    }
}
export{ Carousel }